<script setup>
	import {
	    Delete
	} from '@element-plus/icons-vue'
import { ref } from 'vue'
  import {ElMessage,ElMessageBox} from "element-plus";

  const plan=ref(
      {
    name:"",
    contain:"",
    address:"",
    state:"",
    stateText: "未完成"
  })

  // 更新计划对象的状态文本
  const updateStateText = (planItem) => {
    planItem.stateText = planItem.state ? "已完成" : "未完成";
  }
/*  //初始化计划数据
  const initializePlans = () => {
    const planData = JSON.parse(sessionStorage.getItem('planData')) || [];
    planData.forEach(planItem => updateStateText(planItem));
    plan.value = planData;
  }
  initializePlans();*/

  const changeHandle=(row)=>{
    const planData = JSON.parse(sessionStorage.getItem('planData')) || [];

    // 找到对应的计划
    const planIndex = planData.findIndex(plan => plan.name === row.name && plan.contain === row.contain && plan.address === row.address);
    if (planIndex !== -1) {
      planData[planIndex].state = row.state;
      sessionStorage.setItem('planData', JSON.stringify(planData));
    }
// 更新页面上的状态文本
    row.stateText = row.state ? "已完成" : "未完成";
    console.log(row.state)


  }
  //添加
  const add=()=>{
    const planData = JSON.parse(sessionStorage.getItem('planData')) || [];
    const newPlan = { ...plan.value, state: false };
    planData.push(newPlan);
    sessionStorage.setItem('planData', JSON.stringify(planData));
    ElMessage.success('添加成功');
    // 刷新页面
    window.location.reload();
    // 清空输入字段
    plan.value = {
      name: "",
      contain: "",
      address: "",
      state: ""
    };
  }
  const getAllplan=()=>{
    const planData = JSON.parse(sessionStorage.getItem('planData')) || [];
    planData.forEach(updateStateText);
    plan.value=planData

  }

  getAllplan();

  const deletePlan=(row)=>{

    const planData = JSON.parse(sessionStorage.getItem('planData')) || [];
    // 找到对应的计划索引
    const planIndex = planData.findIndex(plan => plan.name === row.name && plan.contain === row.contain && plan.address === row.address);
    if(planData[planIndex].state===true) {
      ElMessageBox.confirm(
          '你确认删除该分类信息吗？',
          '温馨提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        // 使用splice删除对应的计划对象
        planData.splice(planIndex, 1);
        sessionStorage.setItem('planData', JSON.stringify(planData));
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      // 刷新页面
      window.location.reload();
    })
  .catch(() => {
      //用户点击了取消
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })}else {
      ElMessage({
        type: 'warning',
        message: '未完成无法删除',
      })

    }
  }

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>学习计划表</span>
            </div>
        </template>
      <div>
        <el-col :span="24" >
          <el-row :gutter="20" >
            <el-col :span="6">
              <el-form-item label="学习科目" prop="name" >
              <el-input v-model="plan.name" minlength="1" maxlength="10"></el-input>
            </el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="学习内容" prop="contain">
                <el-input v-model="plan.contain" minlength="1" maxlength="10"></el-input>
              </el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="学习地点" prop="address">
                <el-select placeholder="请选择" v-model="plan.address" >
                  <el-option label="图书馆" value="图书馆"></el-option>
                  <el-option label="自习室" value="自习室"></el-option>
                  <el-option label="宿舍" value="宿舍"></el-option>
                </el-select>
              </el-form-item></el-col>
            <el-col :span="6">
              <el-button type="primary"  @click="add()">添加</el-button>
              </el-col>

          </el-row>
        </el-col>
        <el-divider></el-divider>
      </div>
        <el-table :data="plan" style="width: 100%">
            <el-table-column label="序号" width="100" type="index"> </el-table-column>
            <el-table-column label="学习科目" prop="name"></el-table-column>
            <el-table-column label="学习内容" prop="contain"></el-table-column>
          <el-table-column label="学习地点" prop="address"></el-table-column>
          <el-table-column label="完成状态" prop="state">
            <template #default="{ row }">
            <el-switch
                v-model="row.state"
                class="switch"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeHandle(row)"
            >
            </el-switch>
              <span>{{ row.stateText }}</span>
            </template>
          </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Delete" circle plain type="danger" @click="deletePlan(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>